<template>
  <div>
    <el-card>
      <span class="ddd">部门:</span>
      <!-- 部门多选框 -->
      <el-checkbox-group v-model="checkedDepartment" @change="runFilter">
        <el-checkbox
          v-for="(item, index) in departmentList"
          :key="index"
          :label="item"
        />
      </el-checkbox-group>
      <div class="box" />
      <!-- 状态多选框 -->
      <span class="ddd">考勤:</span>
      <el-checkbox-group v-model="checkedStatus" @change="runFilter">
        <el-checkbox
          v-for="item in statusList"
          :key="item.id"
          :label="item.id"
        >
          {{ item.value }}
        </el-checkbox>
      </el-checkbox-group>
    </el-card>
  </div>
</template>

<script>
import attendanceEnum from '@/api/constant/attendance'
import { getDepartments } from '@/api/departments'
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      checkedDepartment: [],
      checkedStatus: [],
      departmentList: [],
      statusList: attendanceEnum.holidayType
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const { depts } = await getDepartments()
      this.departmentList = depts.map(el => el.name)
    },
    runFilter() {
      const res = this.filterStatus(this.filterDepartment(this.data))
      console.log(res)
      this.$emit('change', res)
    },
    filterDepartment(data) {
      const filteredData = data
        // 过滤部门存在于部门多选框中
        .filter(el => this.checkedDepartment.length === 0 || this.checkedDepartment.includes(el.departmentName))
      return filteredData
    },
    // 状态过滤
    filterStatus(data) {
      const filteredData = data
        .map(el => {
          return {
            ...el,
            attendanceRecord: this.filterDay(el.attendanceRecord)
          }
        })
      return filteredData
    },
    filterDay(record) {
      return record.map(el => {
        console.log(el, 99)
        return {
          ...el,
          adtStatu: this.checkedStatus.length === 0 || this.checkedStatus.includes(el.adtStatu.toString()) ? el.adtStatu : ''
        }
      })
    }
  }
}
</script>

<style lang="scss">

.ddd{
    float: left;
   margin-right: 30px;
    text-align: center;
}
.box{
    width: 100%;
    height: 20px;
}
</style>
